<template>
  <section class="main">
    <!-- <onvif
      :xaddr="connectData.xaddr"
      :user="connectData.user"
      :pass="connectData.pass"
      :rtsp="connectData.rtsp"
      :reConnect="false"
      ref="onvif"
      @connect="connect"
      @presets="presets"
      @setPresetCallback="setPresetCallback"
      @close="close"
      @error="error"
      class="left"
    /> -->
    <onvif :xaddr="connectData.xaddr" :readonly="true" :user="connectData.user" :pass="connectData.pass" :rtsp="connectData.rtsp"
    :reConnect="true" class="onvif" @connect="connect" @setPresetCallback="setPresetCallback"/>
    <!-- <div class="right list" v-if="connected" style="display: none;">
      <el-button @click="goList" size="small" style="margin-bottom: 10px;">多视频DEMO</el-button>
      <div class="tools">
        <el-button-group class="group">
          <el-button
            title="同步刷新"
            size="small"
            icon="el-icon-refresh"
            @click="reload"
          ></el-button>
          <el-button
            title="重启摄像机"
            type="danger"
            size="small"
            icon="el-icon-warning"
            @click="reboot"
          ></el-button>
          <el-button
            title="设置Home点(部分摄像机无效)"
            type="warning"
            size="small"
            icon="el-icon-s-home"
            @click="home"
          ></el-button>
        </el-button-group>
      </div>
      <div class="presets">
        <el-button-group
          class="group"
          v-for="(profile, index) in ptzProfiles"
          :key="index"
        >
          <div>{{ profile.label }}</div>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-video-camera"
            @click="goto(profile.token)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="set(profile.token, profile.unuse)"
          ></el-button>
        </el-button-group>
      </div>
    </div> -->
  </section>
</template>

<script>
import onvif from "comp/onvif.vue";
export default {
  name: "Camera",
  components: {
    onvif,
  },
  data() {
    return {
      connectData: {
        xaddr: "",
        user: "",
        pass: "",
        rtsp:"",
      },
      ptzProfiles: [],
      connected: false,
    };
  },
  mounted() {
    const header = document.querySelector('header');
    header.style.display = 'none';
    // 监听消息事件
    window.addEventListener('message', this.receiveMessage, false);
    // window.addEventListener("message", this.handleMessage)
  },
  created() {
    // 获取父页面的URL
    var parentUrl = window.location.href;
    // console.log(parentUrl);
    // 使用URLSearchParams解析URL参数
    var urlParams = new URLSearchParams(parentUrl.split('?')[1]);
    // console.log(urlParams);

    // 获取特定的参数值
    var xaddr = urlParams.get('xaddr');
    var user = urlParams.get('user');
    var pass = urlParams.get('pass');
    var rtsp = urlParams.get('rtsp');
    this.connectData = {
        xaddr: xaddr,
        user: user,
        pass: pass,
        rtsp: rtsp,
      },
    console.log(this.connectData);

    setTimeout(() => {
      // this.$refs.onvif.init();
    }, 100)
  },
  methods: {
    receiveMessage(event) {
      // console.log(event.data.toString());
      let str = event.data.toString().split("=");
      if (str[0] === "cameraJson") {
        let cameraJson = str[1]; 
        this.goto(cameraJson);
      }
      if (str[0] === "saveCameraJson") {
        let cameraJson = str[1]; 
        this.set(cameraJson.toString());
        console.log("gengxin");
      }
    },
    // 向父页面传值的方法   @param {Object} data
    sendMessage(data) {
      window.parent.postMessage(data, '*');
    },

     //摄像机组件方法如下
     set(token, isadd = false) {
        this.$refs.onvif.setPreset(token, isadd);
      },
      setPresetCallback(res) {
        //console.log(res);
      },
      goto(token){
        // console.log(token);
        this.$refs.onvif.gotoPreset(token);
      },
      presets(list) {
        this.sendMessage(list);
        //console.log(list);
        this.ptzProfiles = [];
        list.forEach((item) => {
          const token = item.token;
          this.ptzProfiles.push({
            label: `预设位${this.ptzProfiles.length + 1}`,
            token,
            speed: 1,
          });
        });
      },
      connect() {
        this.connected = true;
      },
      close(msg) {
        this.connected = false;
        console.log(msg);
      },
      error(error) {
        console.log(error);
      },
      reboot() {
        const that = this;
        this.$confirm("确定是否要重启摄像机?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            that.$refs.onvif.reboot();
          })
          .catch(() => { });
      },
      reload() {
        location.reload();
      },
      home() {
        const that = this;
        this.$confirm("确定要设置当前点为Home点(部分摄像机无效)么?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            that.$refs.onvif.setHome();
          })
          .catch(() => { });
      },
      //多视频
      goList() {
            this.$router.push('/list')
        }
      //摄像机组件方法如上
  },
};
</script>

<style scoped lang="scss">
  .main {
  display: flex;
  .left {
    flex: 1;
  }
  .right {
    width: 180px;
    height: 100%;
    &.list {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      .presets {
        overflow-y: auto;
      }
      .group {
        margin-bottom: 5px;
        display: flex;
        div {
          width: 68px;
          text-align: right;
          color: #fff;
          line-height: 30px;
          font-size: 12px;
          padding-right: 8px;
        }
      }
      ::v-deep {
        .el-button--small {
          padding: 6px 15px;
        }
      }
    }
  }
}
</style>
